<template>
  <view class="pick-up-card f jc-sb ai-c">
    <view class="goodsImage">
      <van-image
        fit="contain"
        width="180rpx"
        height="180rpx"
        :src="base64Data"
        @click.stop="clickToPreview"
      />
    </view>
    <view class="goods-detail f1 as-fs">
      <view class="f fd-col jc-fs">
        <view style="margin-bottom: 10rpx"
          ><text style="font-weight: 600">{{
            signStatusMap[cardData.signForStatus]
          }}</text></view
        >
        <view style="margin-bottom: 10rpx"
          ><text
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
            >{{ cardData.goodsName }}</text
          ></view
        >
        <view
          v-if="cardData.signForTime !== ''"
          style="margin-bottom: 10rpx; color: #999; font-size: 20rpx"
        >
          <text>{{ cardData.signForTime }}</text>
        </view>
        <view
          style="
            color: #999;
            font-size: 20rpx;
            white-space: nowrap;
            display: flex;
          "
        >
          <text
            style="
              width: 0;
              flex: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            "
            >{{ cardData.expressCompany }}
            {{ cardData.goodsCurrentAddress }}</text
          >
        </view>
      </view>
    </view>
    <view class="goods-operations">
      <van-button
        v-if="cardData.isNFC === 2"
        type="primary"
        round
        @click="handleSignFor"
        :disabled="
          cardData.goodsCurrentAddress !== cardData.stageAddress ||
          cardData.signForStatus === 1
        "
        >签收</van-button
      >
      <van-button
        v-else
        type="primary"
        round
        @click="handleNFC"
        :disabled="
          cardData.goodsCurrentAddress !== cardData.stageAddress ||
          cardData.signForStatus === 1
        "
        >NFC取件</van-button
      >
    </view>
  </view>
</template>

<script>
import { ref, toRef, watchEffect } from "vue";
import { ImagePreview } from "vant";
import profileAPI from "/api/modules/profile";
export default {
  name: "pick-up-card",
  props: {
    cardData: {
      type: Object,
      default: () => ({}),
    },
    isConfirmed: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["openPopup", "changeSignForStatusAndSignForTime"],
  setup(props, { emit }) {
    const { userName, userPhone, goodsName } = props.cardData;
    const base64Data = ref("");
    const isConfirmed = toRef(props, "isConfirmed");
    const signStatusMap = {
      1: "已签收",
      2: "未签收",
    };
    const getGoodsImage = () => {
      const params = {
        userName,
        userPhone,
        goodsName,
      };
      profileAPI
        .getGoodsImage(params)
        .then((res) => {
          base64Data.value = "data:image/png;base64," + res;
        })
        .catch((err) => {
          base64Data.value = "/static/image/profile/image_loading_error.png";
          console.log(err);
        });
    };
    const clickToPreview = (e) => {
      ImagePreview([base64Data.value]);
    };
    const handleSignFor = async () => {
      emit("openPopup");
    };
    const handleNFC = () => {
      uni.navigateTo({
        url: `/pages/home/nfc-page?userName=${userName}&userPhone=${userPhone}&goodsName=${goodsName}`,
      });
    };
    const updateSignForAndSignForTime = async () => {
      const params = { signForStatus: 1, userName, userPhone, goodsName };
      if (isConfirmed.value) {
        await profileAPI
          .updateSignForStatusAndSignForTime(params)
          .then((res) => {
            uni.showToast({
              title: "签收成功",
              icon: "success",
              duration: 1000,
              position: "top",
            });
          })
          .catch((err) => {
            uni.showToast({
              title: "签收失败，请稍后重试",
              icon: "error",
              duration: 1000,
              position: "top",
            });
            console.log(err);
          });
        emit("changeSignForStatusAndSignForTime");
      }
    };
    watchEffect(() => {
      getGoodsImage();
      updateSignForAndSignForTime();
    });
    return {
      base64Data,
      signStatusMap,
      clickToPreview,
      handleSignFor,
      handleNFC,
    };
  },
};
</script>
<style lang='scss' scoped>
.pick-up-card {
  margin-bottom: 30rpx;
  padding: 30rpx;
  width: 100%;
  height: 240rpx;
  box-shadow: 0 2px 4px #999;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 30rpx;
  .goodsImage {
    height: 100%;
    margin-right: 30rpx;
    ::v-deep .van-image {
      height: 100%;
      .van-image__img {
        height: 100%;
      }
    }
  }
  .goods-detail {
    overflow: hidden;
  }
  .goods-operations {
    width: 140rpx;
    margin-left: 10rpx;
    ::v-deep .van-button {
      width: 140rpx;
    }
  }
}
</style>